<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../org/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./main.css">
    <script src="../../org/jquery.min.js"></script>
    <script src="../../org/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../org/angular.min.js"></script>
    <script src="../../org/underscore-min.js"></script>
    <script>
        $(function() {
            $('.topBox').on('mouseenter', '.top', function() {
                $(this).find('.top-icon').css('display', 'block');
            })
            $('.topBox').on('mouseleave', '.top', function() {
                $(this).find('.top-icon').css('display', 'none');
            })
            $('.topBox').on('mouseenter', '.sub', function() {
                $(this).find('.sub-icon').css('display', 'block');
            })
            $('.topBox').on('mouseleave', '.sub', function() {
                $(this).find('.sub-icon').css('display', 'none');
            })
        })
    </script>
</head>

<body ng-app="app" ng-controller="ctrl">

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="wx-wrapper">
                    <dl ng-repeat="t in data.button">
                        <dt ng-bind="t.name"></dt>
                        <dd ng-repeat="sub in t.sub_button" ng-bind="sub.name"></dd>
                    </dl>

                </div>
            </div>

            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">编辑区域</h3>
                    </div>
                    <div class="panel-body topBox">
                        <!-- 一级导航开始 -->
                        <div class="panel panel-primary top" ng-repeat="v in data.button">
                            <span ng-click="removeTop(v)" class="top-icon glyphicon glyphicon-remove-circle"></span>
                            <div class="panel-body">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-2 control-label">title</label>
                                        <div class="col-sm-10">
                                            <input type="title" class="form-control" ng-model="v.name" placeholder="标题">
                                        </div>
                                    </div>
                                    <div class="form-group" ng-if="!v.sub_button||v.sub_button.length===0">
                                        <label for="inputEmail3" class="col-sm-2 control-label">类型</label>
                                        <div class="col-sm-10">
                                            <label class="radio-inline">
  <input type="radio" name="topRadio" ng-model="v.type" value="click"> 关键词
</label>
                                            <label class="radio-inline">
  <input type="radio" name="topRadio" ng-model="v.type" value="view"> 网址
</label>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-if="(!v.sub_button||v.sub_button.length===0)&&v.type==='view'">
                                        <label for="inputEmail3" class="col-sm-2 control-label">url</label>
                                        <div class="col-sm-10">
                                            <input type="title" class="form-control" ng-model="v.url" placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group" ng-if="(!v.sub_button||v.sub_button.length===0)&&v.type==='click'">
                                        <label for="inputEmail3" class="col-sm-2 control-label">关键词</label>
                                        <div class="col-sm-10">
                                            <input type="title" class="form-control" ng-model="v.key" placeholder="url">
                                        </div>
                                    </div>
                                </form>

                                <!-- 二级菜单开始 -->
                                <div class="panel panel-primary sub" ng-repeat="sub in v.sub_button">
                                    <span class="sub-icon glyphicon glyphicon-remove-circle" ng-click="removeSub(v,sub)"></span>
                                    <div class="panel-body">
                                        <form class="form-horizontal">
                                            <div class="form-group">
                                                <label for="inputEmail3" class="col-sm-2 control-label">title</label>
                                                <div class="col-sm-10">
                                                    <input type="title" class="form-control" ng-model="sub.name" placeholder="标题">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="inputEmail3" class="col-sm-2 control-label">类型</label>
                                                <div class="col-sm-10">
                                                    <label class="radio-inline">
          <input type="radio" name="type" value="click" ng-model="sub.type"> 关键词
        </label>
                                                    <label class="radio-inline">
          <input type="radio" name="type" value="view" ng-model="sub.type"> 网址
        </label>
                                                </div>
                                            </div>
                                            <div class="form-group" ng-if="sub.type==='click'">
                                                <label for="inputEmail3" class="col-sm-2 control-label">关键词</label>
                                                <div class="col-sm-10">
                                                    <input type="title" class="form-control" ng-model="sub.key" placeholder="关键词">
                                                </div>
                                            </div>

                                            <div class="form-group" ng-if="sub.type==='view'">
                                                <label for="inputEmail3" class="col-sm-2 control-label">url</label>
                                                <div class="col-sm-10">
                                                    <input type="title" class="form-control" ng-model="sub.url" placeholder="url">
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <!-- 二级菜单结束 -->

                                <button ng-click="addSub(v)" type="button" class="btn-primary btn" name="button">添加二级菜单</button>
                            </div>
                        </div>
                        <button ng-click="addTop()" type="button" class="btn-primary btn" name="button">添加一级菜单</button>
                        <!-- 一级导航结束 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var m = angular.module('app', []);
        m.controller('ctrl', ['$scope', function($scope) {
            //删除顶级菜单
            $scope.removeTop = function(top) {
                $scope.data.button = _.without($scope.data.button, top);
            }
            $scope.removeSub = function(top, sub) {
                top.sub_button = _.without(top.sub_button, sub);
            }
            //添加顶级菜单
            $scope.addTop = function() {

                var newTop = {
                    "type": "click",
                    "name": "新的菜单",
                    "key": "V1001_TODAY_MUSIC",

                }
                if ($scope.data.button.length < 3) {
                    $scope.data.button.push(newTop);
                } else {
                    alert('顶级菜单最多三个');
                }
            }
            //添加子菜单
            $scope.addSub = function(top) {
                var newSub = {
                    "type": "click",
                    "name": "新的子菜单",
                    "key": "V1001_TODAY_MUSIC",

                }
                if (!top.sub_button) {
                    top.sub_button = [];
                }
                if (top.sub_button.length < 5) {
                    top.sub_button.push(newSub);
                } else {
                    alert('子菜单不能超过5个');
                }
            }
            $scope.data = {
                "button": [{
                        "type": "click",
                        "name": "今日歌曲",
                        "key": "V1001_TODAY_MUSIC",

                    },
                    {
                        "name": "菜单",
                        "sub_button": [{
                                "type": "view",
                                "name": "搜索",
                                "url": "http://www.soso.com/"
                            },
                            {
                                "type": "view",
                                "name": "视频",
                                "url": "http://v.qq.com/"
                            },
                            {
                                "type": "click",
                                "name": "赞一下我们",
                                "key": "V1001_GOOD"
                            }
                        ]
                    }
                ]
            }
        }])
    </script>
</body>

</html>
